<template>
  <div class="ver-layout" style="width: 100%">
    <div class="card-layout1 ver-layout">
      <h3>输入阿里云图片地址；</h3>
      <el-input placeholder="请输入阿里云图片地址" v-model="aliImage" clearable></el-input>
    </div>
    <div class="hor-layout" style="width: 100%">
      <div class="card-layout ver-layout" style="flex:1">
        <div> 阿里云oss图片：</div>
        <img class="image-view" :src="aliImage">
      </div>
      <div class="ver-layout" style="width: 50%">
        <div class="card-layout ver-layout">
          <div>阿里云oss图片下载地址：</div>
          <a :href="aliImage" style="word-break: break-all;">{{ aliImage }}</a>
          <div>后台图片的md5值：
            <span class="value-view">{{ upload_md5 }}</span>
          </div>
        </div>
        <div class="card-layout ver-layout">
          <h3>方法一、通过XMLHttpRequest下载阿里云oss的图片并获取md5值</h3>
          <button class="upload-demo button-view" @click="downloadBolbToMd5">下载图片</button>
          <div>上传的阿里云图片的md5值：
            <span class="value-view">{{ local_download_md5 }}</span>
          </div>
          <div>对比md5值：
            <span class="value-view1">{{ this.upload_md5.toLowerCase() == this.local_download_md5 }}</span>
          </div>
        </div>
        <div class="card-layout ver-layout">
          <h3>方法二、上传从从阿里云oss下载的图片获取md5值</h3>
          <el-upload
              class="upload-demo"
              action="UploadUrl()"
              :auto-upload="false"
              :on-change="fileChange"
              :file-list="fileList"
              multiple>
            <button class="button-view">上传图片</button>
          </el-upload>
          <div>上传的阿里云图片的md5值：
            <span class="value-view">{{ local_upload_md5 }}</span>
          </div>
          <div>对比md5值：
            <span class="value-view1">{{ this.upload_md5.toLowerCase() == this.local_upload_md5 }}</span>
          </div>
        </div>
        <div class="card-layout">
          <button @click="getMsbInfo">获取蒙速办接口</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SparkMD5 from 'spark-md5'

export default {
  name: "test",
  data() {
    return {
      fileList: [],
      aliImage: 'https://bucket-zyj001.oss-cn-wulanchabu.aliyuncs.com/workplace/%E5%85%AC%E4%BC%97%E5%8F%B7%20%282%29.png',
      upload_md5: "2113429FF46C335890117E753B068366",
      local_upload_md5: "",
      local_download_md5: ""
    }
  },
  methods: {
    // 文件状态改变时
    fileChange(file) {
      console.log(file.raw)
      var fileReader = new FileReader()
      var Spark = new SparkMD5.ArrayBuffer()
      fileReader.readAsArrayBuffer(file.raw)
      fileReader.onload = (e) => {
        Spark.append(e.target.result)
        this.local_upload_md5 = Spark.end()
        console.log("local_md5====", this.local_upload_md5)
        console.log("upload_md5====", this.upload_md5)
        console.log("compare====", this.upload_md5.toLowerCase() == this.local_upload_md5)
      }
      this.fileList.push(file.raw)
      console.log(this.fileList)
    },
    async getBlob() {
      let url = this.aliImage
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
          if (xhr.status === 200) {
            return resolve(xhr.response);
          }
          resolve({})
        };
        xhr.send();
      });
    },
    async getMsbInfo() {
      let query = {app_id: '12', auth_token: "123", sign: '123'}
      let {app_id, auth_token, sign} = query
      // let url = `https://app.zwfw.nmg.gov.cn:4443/icity/auth2.0/get_user_info?app_id=${app_id}&auth_token=${auth_token}&sign=${sign}`
      let url = `http://120.133.52.68:4321/msbzwfw/icity/auth2.0/get_user_info?app_id=${app_id}&auth_token=${auth_token}&sign=${sign}`
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.withCredentials = false
        xhr.open('GET', url, true);
        xhr.onload = () => {
          if (xhr.status === 200) {
            return resolve(xhr.response);
          }
          resolve({})
        };
        xhr.send();
      })
    },
    async downloadBolbToMd5() {
      let res = await this.getBlob()
      console.log("downloadBolbToMd5", res)
      var fileReader = new FileReader()
      var Spark = new SparkMD5.ArrayBuffer()
      fileReader.readAsArrayBuffer(res)
      fileReader.onload = (e) => {
        Spark.append(e.target.result)
        this.local_download_md5 = Spark.end()
        console.log("local_download_md5====", this.local_download_md5)
        console.log("upload_md5====", this.upload_md5)
        console.log("compare====", this.upload_md5.toLowerCase() == this.local_download_md5)
      }
    }
  }
}
</script>

<style scoped>
.upload-demo {
  margin-top: 10px;
  margin-bottom: 10px;
}

.button-view {
  width: fit-content;
}

.card-layout {
  margin: 20px 10px;
  padding: 13px;
  background: #98d8bb;
  border-radius: 8px;
}

.card-layout > * {
  margin-bottom: 10px;
}

.value-view {
  font-weight: bold;
  color: cornflowerblue;
}

.value-view1 {
  font-weight: bold;
  color: orangered;
}

.image-view {
  width: 100%;
  max-height: 80vh;
  margin-top: 10px;
}

.card-layout1 {
  margin: 20px 10px;
  padding: 13px;
  background: #f7f7f7;
  border-radius: 8px;
}

.card-layout1 > * {
  margin-bottom: 10px;
}
</style>
